<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { examRecordsApi } from '@/service/my/index'
import { ref } from 'vue'

const value = ref<string[]>(['item1'])

const recordList = ref<any>()

const props = defineProps({
  id: String,
})

onLoad(() => {})

onMounted(() => {
  examRecordsList()
})

const examRecordsList = async () => {
  try {
    const params = { examPlanId: props.id }
    const res: any = await examRecordsApi(params)
    if (res?.code === 200) {
      recordList.value = res.data
    } else {
      console.error('')
    }
  } catch (error) {
    uni.showToast({
      title: '获取课程详情失败',
      icon: 'none',
    })
  }
}
</script>

<template>
  <view>
    <wd-collapse v-model="value" style="margin: 20rpx">
      <wd-collapse-item
        custom-body-style="padding:0 0 0 0px"
        custom-class="collapse_item_style"
        v-for="(classItem, index) in recordList"
        :key="index"
        :name="classItem.className + index"
        :title="`${classItem.className}`"
      >
        <view class="student_item" v-for="(item, index) in classItem.examRecordList" :key="index">
          <view style="display: flex; flex-direction: row">
            <wd-img
              :width="40"
              :height="40"
              round
              :src="item.avatar ? item.avatar : '/static/images/logo.png'"
            />
            <view class="name_item">
              <view class="stu_name">{{ item.studentName }}</view>
              <view class="stu_time">{{ item.examStartTime }}</view>
            </view>
          </view>

          <view>
            <wd-text
              :text="item.examScore !== null ? `${item.examScore}分` : '--'"
              color="#3670F7"
            ></wd-text>
            <wd-icon
              style="margin-left: 15rpx"
              name="/static/images/my/arrow_right.png"
              size="15"
            />
          </view>
        </view>
      </wd-collapse-item>
    </wd-collapse>
  </view>
</template>

<style lang="scss" scoped>
.student_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
}
/* 折叠面板 */
:deep(.wd-collapse) {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  gap: 20rpx;
  // margin-top: 20rpx;
  background: transparent;

  .wd-collapse-item__header,
  .wd-collapse-item__body {
    background: #fff;
  }

  .wd-collapse-item__header {
    border-radius: 12rpx;
  }
}

.collapse_item_style {
  font-size: 24rpx;
  font-weight: bold;
}

.name_item {
  margin-left: 10rpx;
}

.stu_name {
  font-size: 24rpx;
  font-weight: bold;
  color: black;
}

.stu_time {
  margin-top: 10rpx;
  font-size: 20rpx;
  color: gray;
}

.score-info {
  font-size: 24rpx;
  font-weight: bold;
  color: black;
}
</style>
